<div class="tlp-framed-vertically">
    {{# header }}
        {{> admin-header }}
    {{/ header }}

    <div class="tlp-framed-horizontally" id="siteadmin-statistics-disk-usage-user-details">
        <section class="tlp-pane" id="siteadmin-statistics-disk-usage-user-details-search">
            <div class="tlp-pane-container">
                {{# search_fields }}
                    <div class="tlp-pane-header">
                        <h1 class="tlp-pane-title"><i class="fa fa-search tlp-pane-title-icon"></i> {{ title }}</h1>
                    </div>
                    <section class="tlp-pane-section">
                        <form action="disk_usage.php" method="GET" name="progress_by_user">
                            <input name="menu" type="hidden" value="one_user_details"/>
                            <div class="tlp-form-element">
                                <label for="user" class="tlp-label">{{ user_id_label }} <i class="fa fa-asterisk"></i></label>
                                <select
                                    class="tlp-select user-autocompleter"
                                    id="user"
                                    name="user"
                                    style="width: 100%"
                                    required
                                    data-placeholder="john"
                                >
                                    {{# user_name_value }}
                                        <option selected="selected" value="{{ user_name_value }}">{{ user_name_value }}</option>
                                    {{/ user_name_value }}
                                </select>
                            </div>
                            <div class="tlp-form-element">
                                <label for="group_by" class="tlp-label">{{ group_by_label }}</label>
                                <select
                                    id="group_by"
                                    name="group_by"
                                    class="tlp-select"
                                >
                                    {{# group_by_values }}
                                        <option value="{{ value }}" {{# is_selected }}selected{{/ is_selected }}>{{ label }}</option>
                                    {{/ group_by_values }}
                                </select>
                            </div>
                            <div class="tlp-form-element">
                                <label for="start-date-picker" class="tlp-label">{{ start_date_label }}</label>
                                <div class="tlp-form-element tlp-form-element-prepend">
                                    <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                    <input
                                        type="text"
                                        id="start-date-picker"
                                        name="start_date"
                                        class="tlp-input tlp-input-date"
                                        size="11"
                                        value="{{ start_date_value }}"
                                    >
                                </div>
                            </div>
                            <div class="tlp-form-element">
                                <label for="end-date-picker" class="tlp-label">{{ end_date_label }}</label>
                                <div class="tlp-form-element tlp-form-element-prepend">
                                    <span class="tlp-prepend"><i class="fa fa-calendar"></i></span>
                                    <input
                                        type="text"
                                        id="end-date-picker"
                                        name="end_date"
                                        class="tlp-input tlp-input-date"
                                        size="11"
                                        value="{{ end_date_value }}"
                                    >
                                </div>
                            </div>

                            <button type="submit" class="tlp-button-primary tlp-button-wide">
                                <i class="fa fa-search tlp-button-icon"></i> {{ search }}
                            </button>
                        </form>
                    </section>
                {{/ search_fields }}
            </div>
        </section>

        <section class="tlp-pane" id="siteadmin-statistics-disk-usage-user-details-data">
            <div class="tlp-pane-container">
                <div class="tlp-pane-header">
                    <div class="tlp-pane-title">
                        {{ user_details_pane_title }}
                    </div>
                </div>
                <section class="tlp-pane-section">
                    <img src="{{ graph_url }}"" title="{{ graph_image_title }}" />
                </section>
                <section class="tlp-pane-section" id="siteadmin-statistics-disk-usage-user-details-data-row">
                    {{# data_user_details }}
                    <div class="tlp-property siteadmin-statistics-disk-usage-user-details-data-property">
                        <label class="tlp-label">{{ name_label }}</label>
                        <p>
                            <a href="{{ user_details_url }}">
                                {{ user_name }}
                            </a>
                        </p>
                    </div>
                    <div class="tlp-property siteadmin-statistics-disk-usage-user-details-data-property">
                        <label class="tlp-label">{{ start_size_label }}</label>
                        <p>{{ start_size }}</p>
                    </div>
                    <div class="tlp-property siteadmin-statistics-disk-usage-user-details-data-property">
                        <label class="tlp-label">{{ end_size_label }}</label>
                        <p>{{ end_size }}</p>
                    </div>
                    <div class="tlp-property siteadmin-statistics-disk-usage-user-details-data-property">
                        <label class="tlp-label">{{ size_evolution_label }}</label>
                        <p>{{ evolution }}</p>
                    </div>
                    <div class="tlp-property siteadmin-statistics-disk-usage-user-details-data-property">
                        <label class="tlp-label">{{ size_evolution_rate_label }}</label>
                        <p>{{ evolution_rate }}</p>
                    </div>
                    {{/ data_user_details }}
                    {{^ data_user_details }}
                        <p>{{ error_message }}</p>
                    {{/ data_user_details }}
                </section>
            </div>
        </section>
    </div>
</div>
